﻿<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>index</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/china.js"></script>
	<script type="text/javascript" src="js/map.js"></script>
	<script type="text/javascript" src="js/js.js"></script>
	<script src="../js/request.js"></script>
	<script src="./js/showechart.js"></script>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="head clearfix">
		<h1 class="pulll_left">学生信息统计系统--分析界面</h1>
		<div class="menu menu2 pulll_left">
			<ul>
				<li><a href="../分析界面/index.html">主界面</a></li>

			</ul>
		</div>
		<div class="time" id="showTime">2018/6/12 17:00:12</div>

	</div>
	<div class="mainbox">

		<ul class="clearfix nav1">
			<li style="width: 22%">
				<div class="box">
					<div class="tit">出勤性别分析</div>
					<div class="boxnav" style="height: 330px;">

						<div class="boxnav" id="getStatusGender" style="height: 300px;">

						</div>
						<!--				</div>-->
					</div>
				</div>
				<div class="box">
					<div class="tit">学期性别信息分析</div>
					<div class="boxnav" style="height:550px ;">
						<div class="" style="width: 100%;height:540px;" id="getSemesterGender"></div>
					</div>
				</div>

			</li>
			<li style="width: 56%">

				<div class="box">
					<div class="boxnav mapc" style="height: 550px; position: relative">
						<input type="text" id="searchInput"> <button  onclick="search()">搜索</button>
						<div style="overflow-y:scroll;height: 500px">
							<table id="getCFList">
								<thead>
									<tr>
										<th>姓名</th>
										<th>绩点</th>
										<th>学期</th>
										<th>推荐</th>
									</tr>
								</thead>
								<tbody id="getCFListtbody">
	
								</tbody>
							</table>
						</div>
						

						<!-- <div class="map" id="map"></div> -->
					</div>
				</div>
				<div class="box">

					<div class="tit">班级性别信息分析</div>
					<div class="boxnav" style="height: 350px;" id="getAllClassGenderEchart">
						<!--				<div id="getGenderConunt" style="width: 100%;height:540px;"></div>-->


					</div>
				</div>
			</li>
			<li style="width: 22%">
				<div class="box">
					<div class="tit">性别信息分析</div>
					<div class="boxnav" id="getGenderConunt" style="height: 200px;">

					</div>
				</div>
				<div class="box">
					<div class="tit">学期班级性别分析</div>
					<div class="boxnav" style="height: 660px;" id="getSemesterClassGender">



					</div>
				</div>

			</li>
		</ul>



		<script>
			var t = null;
			t = setTimeout(time, 1000);//開始运行
			function time() {
				clearTimeout(t);//清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();//获取时
				var m = dt.getMinutes();//获取分
				var s = dt.getSeconds();//获取秒
				document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}

		</script>
		<script>
			
			function search() {
				var url = "/CF/getCFList"
				var value = document.getElementById("searchInput").value
				if(value !== ""){
					url = url + "?name=" + value
				}
				Get(url).then((data) => {
					console.log(JSON.stringify(data.data))
					var tbodyEl = document.getElementById("getCFListtbody")
					tbodyEl.innerHTML = ""
					for (let i = 0; i < data.data.length; i++) {
						if (data.data[i].recommendation == null) {
							tbodyEl.innerHTML += `<tr>
														<td>${data.data[i].name}</td>
														<td>${data.data[i].gpa}</td>
														<td>第${data.data[i].semester}学期</td>
														</tr>`
						}else{tbodyEl.innerHTML += `<tr>
														<td>${data.data[i].name}</td>
														<td>${data.data[i].gpa}</td>
														<td>第${data.data[i].semester}学期</td>
														<td>${data.data[i].recommendation}</td>
														</tr>`}
					}
			
				})
			}
			search()
			document.getElementById("searchInput").addEventListener("keyup", function (event) {
				event.preventDefault();
				if (event.keyCode === 13) {
					search()
				}
			});


			Get("/Gender/getGenderCount").then((data) => {
				// console.log(JSON.stringify(data.data))
				getGenderConunt('getGenderConunt', data.data)
			})
			Get("/Gender/getGenderCount").then((data) => {
				// console.log(JSON.stringify(data.data))
				getGenderConunt('getGenderConunt', data.data)
			})
			Get("/Gender/getAllClassGender").then((data) => {
				// console.log(JSON.stringify(data.data))
				var classNameY = []
				var nanX1 = []
				var nvX2 = []
				data.data.forEach(element => {
					classNameY.push(element.classId + "班")
					nanX1.push(element.maleCount)
					nvX2.push(element.femaleCount)
				});
				getAllClassGender('getAllClassGenderEchart', classNameY, nanX1, nvX2)
			})
			Get("/Gender/getStatusGender").then((data) => {
				// console.log(JSON.stringify(data))
				var dataset = []
				dataset.push(['性别', '男', '女'])
				data.data.forEach(element => {
					dataset.push([element.status === 'A' ? '在校' + element.sumCount + '人' : '毕业' + element.sumCount + '人', element.maleCount, element.femaleCount])

				});
				getStatusGender('getStatusGender', dataset)
			})
			Get("/Gender/getSemesterGender").then((data) => {
				// console.log(JSON.stringify(data))
				console.log(JSON.stringify(data.data))
				var classNameY = []
				var nanX1 = []
				var nvX2 = []
				data.data.forEach(element => {
					classNameY.push("第" + element.semester + "学期")
					nanX1.push(element.maleCount)
					nvX2.push(element.femaleCount)
				});
				getSemesterGender('getSemesterGender', classNameY, nanX1, nvX2)
			})
			Get("/Gender/getSemesterClassGender").then((data) => {
				console.log(JSON.stringify(data.data))
				var classNameY = []
				var nanX1 = []
				var nvX2 = []
				data.data.forEach(element => {
					classNameY.push("第" + element.semester + "学期" + element.classId + "班")
					nanX1.push(element.maleCount)
					nvX2.push(element.femaleCount)
				});
				getSemesterClassGender('getSemesterClassGender', classNameY, nanX1, nvX2)
			})
		</script>
	</div>
</body>

</html>